<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传图片识别分析 | 视觉AI</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/demo.css">
</head>
<body class="bg-light">
<div class="container">
    <div class="upload-container">
        <h2 class="text-center mb-4">
            <i class="bi bi-robot floating-icon" style="color: var(--primary-color);"></i>
            <br>上传图片识别分析
        </h2>

        <!-- 上传表单 -->
        <form method="POST" enctype="multipart/form-data" id="uploadForm">
            <!-- 拖拽区域 -->
            <div class="preview-area" id="dropZone">
                <div class="mb-3">
                    <i class="bi bi-cloud-arrow-up fs-1" style="color: var(--primary-color);"></i>
                    <p class="text-muted mb-1 mt-2">拖放图片或点击上传</p>
                    <small class="text-muted">支持格式：JPEG/PNG/GIF，最大16MB</small>
                </div>
                <img id="imagePreview" class="preview-image">
            </div>

            <!-- 文件选择按钮 -->
            <button type="button" class="btn btn-primary w-100 upload-btn">
                <i class="bi bi-folder2-open"></i> 选择文件
                <input type="file" name="file" class="file-input"
                       id="fileInput" accept="image/*">
            </button>

            <!-- 进度条 -->
            <div class="upload-progress" id="progressBar">
                <div class="progress-bar" style="width: 0%"></div>
            </div>

            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-success w-100 mt-3 upload-btn">
                <i class="bi bi-cloud-upload"></i> 开始上传
            </button>
        </form>

        <!-- 上传结果展示 -->
        {% if filename %}
            <div class="result-card mt-4 p-4">
                <div class="alert alert-success d-flex align-items-center" role="alert">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    图片上传成功！
                </div>
                <div class="text-center position-relative">
                    <img src="{{ url_for('uploaded_file', filename=filename) }}"
                         class="img-fluid rounded-3"
                         style="max-height: 400px; border: 3px solid white;">
                    <div class="mt-3 d-flex justify-content-between align-items-center">
                        <a href="{{ url_for('uploaded_file', filename=filename) }}"
                           class="view-original-btn"
                           target="_blank">
                            <i class="bi bi-zoom-in"></i>
                            <span>查看原图</span>
                        </a>
                        <button class="ai-btn glow-btn" id="runBtn" value="{{ filename }}" style="left:150px">
                            <i class="bi bi-magic"></i>
                            <span>开始识别</span>
                        </button>
                    </div>
                </div>
                <div id="analysisPanel" class="analysis-panel">
                    <div class="mt-3" id="analysisResult"></div>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script  src="static/js/demo.js" type="text/javascript"></script>
</body>
</html>